<template>
  <view class="customer-service-container">
    

   <!-- 快捷服务菜单
    <view v-if="showQuickService" class="quick-service-menu">
      <view class="quick-service-header">
        <text class="quick-service-title">快捷服务</text>
        <uni-icons type="close" size="20" color="#666" @click="hideQuickService"></uni-icons>
      </view>
      <scroll-view scroll-x class="quick-service-list">
        <view 
          v-for="service in quickServices" 
          :key="service.id"
          class="quick-service-item"
          @click="selectQuickService(service)"
        >
          <text class="service-icon">{{ service.icon }}</text>
          <text class="service-text">{{ service.text }}</text>
        </view>
      </scroll-view>
    </view> -->

    <!-- 聊天消息区域 -->
    <scroll-view 
      scroll-y 
      class="message-list" 
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      @scroll="onScroll"
    >
      <!-- 欢迎消息 -->
      <view v-if="messages.length === 0" class="welcome-section">
        <view class="welcome-icon">
          <text class="service-emoji">🎧</text>
        </view>
        <text class="welcome-title">欢迎使用在线客服</text>
        <text class="welcome-subtitle">我们将为您提供专业的服务支持</text>
        <view class="welcome-tips">
          <text class="tip-title">常见问题：</text>
          <view 
            v-for="tip in welcomeTips" 
            :key="tip.id"
            class="tip-item"
            @click="sendQuickMessage(tip.message)"
          >
            <text class="tip-text">{{ tip.text }}</text>
          </view>
        </view>
      </view>

      <!-- 消息列表 -->
      <view 
        v-for="message in filteredMessages" 
        :key="message.id"
        class="message-item"
        :class="message.sender === currentUserId ? 'message-sent' : 'message-received'"
      >
        <!-- 时间分隔线 -->
        <view v-if="message.showTime" class="time-divider">
          <text class="time-text">{{ formatMessageTime(message.timestamp) }}</text>
        </view>

        <!-- 消息内容 -->
        <view class="message-wrapper">
          <!-- 接收的消息（客服） -->
          <template v-if="message.sender !== currentUserId">
            <image 
              src="/static/images/default-avatar.png" 
              class="message-avatar service-message-avatar"
              @error="handleAvatarError"
            ></image>
            <view class="message-content">
              <view class="message-bubble service-bubble">
                <!-- 文本消息 -->
                <text v-if="message.type === 'text'" class="message-text">{{ message.content }}</text>
                
                <!-- 图片消息 -->
                <view v-if="message.type === 'image'" class="image-container">
                  <image 
                    v-if="getImageUrl(message)" 
                    :src="getImageUrl(message)" 
                    class="message-image"
                    mode="aspectFit"
                    @click="previewImage(getImageUrl(message))"
                    @error="onImageError"
                    @load="onImageLoad"
                    :data-url="getImageUrl(message)"
                  ></image>
                  <view v-else class="image-error">
                    <text class="iconfont icon-tupian error-icon"></text>
                    <text class="error-text">图片加载失败</text>
                    <text class="retry-text" @click.stop="retryLoadMessage(message)">点击重试</text>
                  </view>
                </view>

                <!-- 系统卡片消息 -->
                <view v-if="message.type === 'card'" class="service-card">
                  <text class="card-title">{{ message.card.title }}</text>
                  <text class="card-content">{{ message.card.content }}</text>
                  <view v-if="message.card.buttons" class="card-buttons">
                    <button 
                      v-for="btn in message.card.buttons" 
                      :key="btn.id"
                      class="card-button"
                      @click="handleCardButton(btn)"
                    >
                      {{ btn.text }}
                    </button>
                  </view>
                </view>
              </view>
              <text class="message-time">{{ formatTime(message.timestamp) }}</text>
            </view>
          </template>

          <!-- 发送的消息（用户） -->
          <template v-else>
            <view class="message-content user-content">
              <view class="message-bubble user-bubble">
                <text v-if="message.type === 'text'" class="message-text">{{ message.content }}</text>
                <view v-if="message.type === 'image'" class="image-container">
                  <image 
                    v-if="getImageUrl(message)" 
                    :src="getImageUrl(message)" 
                    class="message-image"
                    mode="aspectFit"
                    @click="previewImage(getImageUrl(message))"
                    @error="onImageError"
                    @load="onImageLoad"
                    :data-url="getImageUrl(message)"
                  ></image>
                  <view v-else class="image-error">
                    <text class="iconfont icon-tupian error-icon"></text>
                    <text class="error-text">图片加载失败</text>
                    <text class="retry-text" @click.stop="retryLoadMessage(message)">点击重试</text>
                  </view>
                </view>
              </view>
              <view class="message-info">
                <text class="message-time">{{ formatTime(message.timestamp) }}</text>
                <!-- 消息状态 -->
                <view class="message-status">
                  <uni-icons 
                    v-if="message.status === 'sending'" 
                    type="spinner-cycle" 
                    size="16" 
                    color="#999"
                  ></uni-icons>
                  <uni-icons 
                    v-else-if="message.status === 'sent'" 
                    type="checkmarkempty" 
                    size="16" 
                    color="#999"
                  ></uni-icons>
                  <uni-icons 
                    v-else-if="message.status === 'delivered'" 
                    type="checkmarkempty" 
                    size="16" 
                    color="#1890ff"
                  ></uni-icons>
                  <uni-icons 
                    v-else-if="message.status === 'failed'" 
                    type="close" 
                    size="16" 
                    color="#ff4d4f"
                    @click="resendMessage(message)"
                  ></uni-icons>
                </view>
              </view>
            </view>
            <image 
              :src="userAvatar || '/static/images/default-avatar.png'" 
              class="message-avatar user-avatar"
            ></image>
          </template>
        </view>
      </view>

      <!-- 客服正在输入提示 -->
      <view v-if="serviceTyping" class="typing-indicator">
        <image src="/static/images/default-avatar.png" class="typing-avatar service-message-avatar"></image>
        <view class="typing-bubble">
          <view class="typing-dots">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-section">
      <!-- 工具栏 -->
      <view v-if="showToolbar" class="toolbar">
        <view class="toolbar-item" @click="chooseImage">
          <uni-icons type="image" size="24" color="#1890ff"></uni-icons>
          <text class="toolbar-text">图片</text>
        </view>
        <view class="toolbar-item" @click="sendQuickMessage('我需要人工客服')">
          <uni-icons type="person" size="24" color="#52c41a"></uni-icons>
          <text class="toolbar-text">人工</text>
        </view>
        <view class="toolbar-item" @click="showQuickService = !showQuickService">
          <uni-icons type="gear" size="24" color="#fa8c16"></uni-icons>
          <text class="toolbar-text">服务</text>
        </view>
        <view class="toolbar-item" @click="showSatisfactionSurvey">
          <uni-icons type="star" size="24" color="#faad14"></uni-icons>
          <text class="toolbar-text">评价</text>
        </view>
      </view>

      <!-- 输入框区域 -->
      <view class="input-area">
        <view class="input-left">
          <view class="plus-button" @click="toggleToolbar">
            <uni-icons 
              type="plus" 
              size="24" 
              :color="showToolbar ? '#1890ff' : '#666'"
            ></uni-icons>
          </view>
        </view>
        <view class="input-middle">
          <view class="input-container">
            <textarea 
              v-model="inputMessage"
              class="message-input"
              placeholder="请输入您的问题..."
              :auto-height="true"
              :maxlength="500"
              @input="onInputChange"
              @focus="onInputFocus"
              @blur="onInputBlur"
            ></textarea>
            <view v-if="inputMessage.length > 0" class="input-counter">
              {{ inputMessage.length }}/500
            </view>
          </view>
        </view>
        <view class="input-right">
          <view v-if="!canSend" class="voice-button" @click="startVoiceInput">
            <uni-icons type="mic" size="20" color="#666"></uni-icons>
          </view>
          <view v-else class="send-button" :class="{ active: canSend }" @click="sendMessage">
            <uni-icons type="paperplane" size="20" color="#fff"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 满意度调查弹窗 -->
    <uni-popup ref="satisfactionPopup" type="center">
      <view class="satisfaction-survey">
        <view class="survey-header">
          <text class="survey-title">服务评价</text>
          <uni-icons type="close" size="20" color="#666" @click="closeSatisfactionSurvey"></uni-icons>
        </view>
        <view class="survey-content">
          <text class="survey-question">您对本次客服服务满意吗？</text>
          <view class="rating-stars">
            <uni-icons 
              v-for="star in 5" 
              :key="star"
              type="star-filled" 
              size="32" 
              :color="star <= rating ? '#ffa940' : '#d9d9d9'"
              @click="setRating(star)"
            ></uni-icons>
          </view>
          <textarea 
            v-model="feedback"
            class="feedback-input"
            placeholder="请输入您的建议或意见（可选）"
            maxlength="200"
          ></textarea>
          <view class="survey-buttons">
            <button class="survey-btn cancel-btn" @click="closeSatisfactionSurvey">取消</button>
            <button class="survey-btn submit-btn" @click="submitSatisfaction">提交</button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentUserId: '',
      userAvatar: '',
      messages: [],
      inputMessage: '',
      scrollTop: 0,
      showToolbar: false,
      showQuickService: false,
      serviceTyping: false,
      serviceStatus: '在线',
      canSend: false,
      rating: 0,
      feedback: '',
      sessionId: '', // 当前会话ID
      
      // 实时更新定时器
      messageTimer: null,
      
      // 快捷服务
      quickServices: [
        { id: 1, icon: '❓', text: '常见问题', message: '我想了解常见问题' },
        { id: 2, icon: '📋', text: '任务相关', message: '我有任务相关的问题' },
        { id: 3, icon: '💰', text: '支付问题', message: '我有支付相关的问题' },
        { id: 4, icon: '👤', text: '账号问题', message: '我有账号相关的问题' },
        { id: 5, icon: '🔧', text: '技术支持', message: '我需要技术支持' },
        { id: 6, icon: '📞', text: '人工客服', message: '我需要转接人工客服' }
      ],
      
      // 欢迎提示
      welcomeTips: [
        { id: 1, text: '如何发布任务？', message: '请问如何发布任务？' },
        { id: 2, text: '如何获得积分？', message: '请问如何获得积分？' },
        { id: 3, text: '支付安全吗？', message: '请问平台的支付安全吗？' },
        { id: 4, text: '联系人工客服', message: '我需要联系人工客服' }
      ]
    }
  },
  
  computed: {
    filteredMessages() {
      return this.messages.map((message, index) => {
        // 判断是否显示时间
        const prevMessage = this.messages[index - 1];
        const showTime = !prevMessage || 
          (message.timestamp - prevMessage.timestamp > 5 * 60 * 1000); // 5分钟
        
        return {
          ...message,
          showTime
        };
      });
    },
    
    // 计算滚动到底部的位置
    scrollToBottomValue() {
      // 当消息数量变化时，返回一个递增的值来触发滚动
      return this.messages.length * 1000 + Date.now();
    }
  },
  
  watch: {
    // 监听消息数组变化，自动滚动到底部
    messages: {
      handler() {
        this.$nextTick(() => {
          setTimeout(() => {
            this.scrollToBottom();
          }, 100);
        });
      },
      deep: true
    }
  },
  
  onLoad(options) {
    console.log('页面加载参数:', options);
    this.initCustomerService();
    this.loadUserInfo();
    
    // 根据参数判断是否需要清空历史记录
    const isNewChat = options.newChat === 'true' || options.newChat === true;
    
    if (isNewChat) {
      console.log('新对话模式：清空历史记录');
      // 清空历史记录，开始新对话
      this.messages = [];
      this.sessionId = '';
      // 可选：关闭之前的会话
      this.closePreviousSession();
      this.sendWelcomeMessage();
    } else {
      console.log('继续对话模式：加载历史记录');
      // 加载历史记录
      this.loadChatHistory();
    }
    
    // 启动实时更新
    this.startRealtimeUpdates();
  },
  
  onShow() {
    // 延迟滚动到底部，确保页面完全显示
    setTimeout(() => {
      this.scrollToBottom();
    }, 200);
    // 重启实时更新
    this.startRealtimeUpdates();
  },
  
  onHide() {
    this.stopRealtimeUpdates();
  },
  
  onUnload() {
    this.stopRealtimeUpdates();
  },
  
  methods: {
    // 初始化客服
    initCustomerService() {
      this.currentUserId = this.getCurrentUserId();
      this.serviceStatus = '在线';
    },
    
    // 加载用户信息
    loadUserInfo() {
      try {
        const userInfo = uni.getStorageSync('uni-id-pages-userInfo');
        if (userInfo && userInfo.avatar_file) {
          this.userAvatar = userInfo.avatar_file.url;
        }
      } catch (e) {
        console.error('加载用户信息失败:', e);
      }
    },
    
    // 加载聊天历史
    async loadChatHistory() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getCustomerServiceChat',
          data: {
            userId: this.currentUserId,
            limit: 50
          }
        });
        
        if (res.result.code === 200) {
          this.messages = res.result.data.map(item => ({
            id: item._id,
            sender: item.senderId === 'customer_service' ? 'customer_service' : item.senderId,
            content: item.messageType === 'image' ? (item.imageUrl || item.content) : item.content,
            type: item.messageType || 'text',
            timestamp: new Date(item.createTime).getTime(),
            status: item.status || 'delivered',
            card: item.card,
            imageUrl: item.imageUrl
          }));
          
          // 保存会话ID
          if (res.result.session) {
            this.sessionId = res.result.session._id;
          }
          
          // 延迟滚动到底部，确保DOM已更新
          this.$nextTick(() => {
            setTimeout(() => {
              this.scrollToBottom();
            }, 100);
          });
        }
      } catch (e) {
        console.error('加载聊天历史失败:', e);
        uni.showToast({
          title: '加载历史消息失败',
          icon: 'none'
        });
      }
    },
    
    // 加载新消息
    async loadNewMessages() {
      try {
        const res = await uniCloud.callFunction({
          name: 'getCustomerServiceChat',
          data: {
            userId: this.currentUserId,
            sessionId: this.sessionId,
            limit: 50  // 增加限制以获取更多消息
          }
        });
        
        if (res.result.code === 200 && res.result.data.length > 0) {
          const newMessages = res.result.data;
          
          // 如果消息数量发生变化，说明有新消息
          if (newMessages.length > this.messages.length) {
            // 获取现有消息的ID集合
            const existingIds = new Set(this.messages.map(m => m.id));
            
            // 找出新消息
            const addedMessages = newMessages
              .filter(item => !existingIds.has(item._id))
              .map(item => ({
                id: item._id,
                sender: item.senderId === 'admin' ? 'customer_service' : item.senderId,
                content: item.messageType === 'image' ? (item.imageUrl || item.content) : item.content,
                type: item.messageType || 'text',
                timestamp: new Date(item.createTime).getTime(),
                status: item.status || 'delivered',
                card: item.card,
                imageUrl: item.imageUrl
              }));
            
            if (addedMessages.length > 0) {
              // 检查是否是客服回复
              const hasServiceReply = addedMessages.some(msg => msg.sender === 'customer_service');
              
              if (hasServiceReply) {
                // 播放提示音
                this.playNotificationSound();
              }
              
              this.messages.push(...addedMessages);
              this.scrollToBottom();
              
              console.log('收到新消息:', addedMessages.length, '条');
            }
          }
        }
      } catch (e) {
        console.error('加载新消息失败:', e);
      }
    },
    
    // 播放通知音效
    playNotificationSound() {
      try {
        uni.showToast({
          title: '客服回复了',
          icon: 'none',
          duration: 1500
        });
      } catch (error) {
        console.log('播放提示音失败:', error);
      }
    },
    
    // 关闭之前的会话
    async closePreviousSession() {
      try {
        // 查找用户的活跃会话并关闭
        const res = await uniCloud.callFunction({
          name: 'closeCustomerServiceSession',
          data: {
            userId: this.currentUserId
          }
        });
        console.log('关闭之前会话结果:', res.result);
      } catch (e) {
        console.log('关闭之前会话失败（这是正常的，可能没有活跃会话）:', e);
      }
    },
    
    // 发送欢迎消息
    sendWelcomeMessage() {
      // 只有在没有消息时才发送欢迎消息
      if (this.messages.length === 0) {
        console.log('发送欢迎消息');
        setTimeout(() => {
          this.receiveMessage({
            type: 'card',
            card: {
              title: '👋 欢迎使用在线客服',
              content: '很高兴为您服务！您可以：\n• 直接输入问题咨询\n• 点击下方快捷服务\n• 选择常见问题模板',
              buttons: [
                { id: 'faq', text: '常见问题' },
                { id: 'human', text: '人工客服' }
              ]
            }
          });
        }, 1000);
      } else {
        console.log('已有消息记录，不发送欢迎消息');
      }
    },
    
    // 启动实时更新
    startRealtimeUpdates() {
      // 停止之前的定时器
      this.stopRealtimeUpdates();
      
      // 每3秒检查新消息
      this.messageTimer = setInterval(() => {
        this.loadNewMessages();
      }, 3000);
      
      console.log('启动实时更新');
    },
    
    // 停止实时更新
    stopRealtimeUpdates() {
      if (this.messageTimer) {
        clearInterval(this.messageTimer);
        this.messageTimer = null;
        console.log('停止实时更新');
      }
    },
    
    // 发送消息
    async sendMessage() {
      if (!this.canSend || !this.inputMessage.trim()) return;
      
      const messageContent = this.inputMessage.trim();
      const tempMessageId = 'temp_' + Date.now().toString();
      
      // 添加临时用户消息（用于即时显示）
      const userMessage = {
        id: tempMessageId,
        sender: this.currentUserId,
        content: messageContent,
        type: 'text',
        timestamp: Date.now(),
        status: 'sending',
        isTemp: true // 标记为临时消息
      };
      
      this.messages.push(userMessage);
      this.inputMessage = '';
      this.canSend = false;
      this.scrollToBottom();
      
      try {
        // 调用客服聊天云函数
        const res = await uniCloud.callFunction({
          name: 'sendCustomerServiceMessage',
          data: {
            content: messageContent,
            messageType: 'text',
            sessionId: this.sessionId
          }
        });
        
        if (res.result.code === 200) {
          // 更新临时消息为已发送状态，但保留显示
          const tempMsgIndex = this.messages.findIndex(m => m.id === tempMessageId);
          if (tempMsgIndex !== -1) {
            this.messages[tempMsgIndex].status = 'delivered';
            this.messages[tempMsgIndex].id = res.result.data._id; // 使用服务器返回的真实ID
            this.messages[tempMsgIndex].isTemp = false; // 标记为正式消息
          }
          
          // 保存会话ID
          if (res.result.data && res.result.data.sessionId) {
            this.sessionId = res.result.data.sessionId;
          }
          
          // 立即检查新消息，然后定期检查
          setTimeout(() => {
            this.loadNewMessages();
          }, 1000);
          
          // 再次检查以确保获取客服回复
          setTimeout(() => {
            this.loadNewMessages();
          }, 3000);
        } else {
          throw new Error(res.result.msg);
        }
      } catch (e) {
        // 发送失败，更新临时消息状态
        const msgIndex = this.messages.findIndex(m => m.id === tempMessageId);
        if (msgIndex !== -1) {
          this.messages[msgIndex].status = 'failed';
        }
        uni.showToast({
          title: '发送失败',
          icon: 'none'
        });
      }
    },
    
    
    // 接收消息
    receiveMessage(messageData) {
      const message = {
        id: Date.now().toString(),
        sender: 'customer_service',
        content: messageData.content,
        type: messageData.type || 'text',
        timestamp: Date.now(),
        status: 'delivered',
        card: messageData.card
      };
      
      this.messages.push(message);
      this.scrollToBottom();
    },
    
    // 快速发送消息
    sendQuickMessage(message) {
      this.inputMessage = message;
      this.canSend = true;
      this.sendMessage();
    },
    
    // 选择快捷服务
    selectQuickService(service) {
      this.showQuickService = false;
      this.sendQuickMessage(service.message);
    },
    
    // 处理卡片按钮
    handleCardButton(button) {
      if (button.id === 'faq') {
        this.sendQuickMessage('我想了解常见问题');
      } else if (button.id === 'human') {
        this.sendQuickMessage('我需要人工客服');
      } else if (button.id === 'callback') {
        this.requestCallback();
      } else if (button.id === 'continue') {
        this.receiveMessage({
          type: 'text',
          content: '好的，请您耐心等待，人工客服会尽快为您服务。'
        });
      }
    },
    
    // 请求回电
    requestCallback() {
      uni.showModal({
        title: '预约回电',
        content: '请确认您的手机号码，客服会在工作时间内回电',
        success: (res) => {
          if (res.confirm) {
            this.receiveMessage({
              type: 'text',
              content: '已为您预约回电服务，客服会在1小时内联系您。'
            });
          }
        }
      });
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.sendImageMessage(tempFilePath);
        }
      });
    },
    
    // 发送图片消息
    async sendImageMessage(imagePath) {
      const tempMessageId = 'temp_img_' + Date.now().toString();
      
      // 添加临时图片消息（显示本地图片）
      const userMessage = {
        id: tempMessageId,
        sender: this.currentUserId,
        content: imagePath,
        type: 'image',
        timestamp: Date.now(),
        status: 'sending',
        isTemp: true
      };
      
      this.messages.push(userMessage);
      this.scrollToBottom();
      
      try {
        // 检查文件大小（限制为5MB）
        try {
          const fileInfo = uni.getFileInfoSync(imagePath);
          if (fileInfo.size > 5 * 1024 * 1024) {
            throw new Error('图片大小不能超过5MB');
          }
        } catch (sizeError) {
          console.warn('获取文件信息失败:', sizeError);
        }
        
        // 先上传图片到云存储
        console.log('开始上传图片到云存储...');
        
        // 获取文件扩展名
        const fileName = imagePath.split('/').pop() || imagePath.split('\\').pop();
        const fileExtension = fileName.split('.').pop() || 'jpg';
        
        const uploadResult = await uniCloud.uploadFile({
          filePath: imagePath,
          cloudPath: `chat-images/${Date.now()}_${Math.random().toString(36).substr(2, 9)}.${fileExtension}`
        });
        
        if (!uploadResult.fileID) {
          throw new Error('图片上传失败');
        }
        
        console.log('图片上传成功，fileID:', uploadResult.fileID);
        
        // 获取文件的临时访问链接
        let imageUrl = uploadResult.fileID;
        try {
          const getTempUrlRes = await uniCloud.getTempFileURL({
            fileList: [uploadResult.fileID]
          });
          
          if (getTempUrlRes.fileList && getTempUrlRes.fileList.length > 0) {
            imageUrl = getTempUrlRes.fileList[0].tempFileURL || uploadResult.fileID;
            console.log('获取临时访问链接成功:', imageUrl);
          }
        } catch (error) {
          console.log('获取临时访问链接失败，使用fileID:', error);
        }
        
        // 更新临时消息的图片URL
        const tempMsgIndex = this.messages.findIndex(m => m.id === tempMessageId);
        if (tempMsgIndex !== -1) {
          this.messages[tempMsgIndex].content = imageUrl;
        }
        
        // 调用云函数发送图片消息
        const res = await uniCloud.callFunction({
          name: 'sendCustomerServiceMessage',
          data: {
            content: '[图片]',
            messageType: 'image',
            imageUrl: uploadResult.fileID,
            sessionId: this.sessionId
          }
        });
        
        if (res.result.code === 200) {
          // 更新临时消息为已发送状态
          if (tempMsgIndex !== -1) {
            this.messages[tempMsgIndex].status = 'delivered';
            this.messages[tempMsgIndex].id = res.result.data._id; // 使用服务器返回的真实ID
            this.messages[tempMsgIndex].isTemp = false; // 标记为正式消息
          }
          
          // 保存会话ID
          if (res.result.data && res.result.data.sessionId) {
            this.sessionId = res.result.data.sessionId;
          }
          
          console.log('图片消息发送成功');
          
          // 延迟加载客服回复消息
          setTimeout(() => {
            this.loadNewMessages();
          }, 1500);
        } else {
          throw new Error(res.result.msg || '发送图片消息失败');
        }
      } catch (e) {
        console.error('发送图片失败:', e);
        // 发送失败，更新临时消息状态
        const msgIndex = this.messages.findIndex(m => m.id === tempMessageId);
        if (msgIndex !== -1) {
          this.messages[msgIndex].status = 'failed';
        }
        uni.showToast({
          title: '发送图片失败: ' + (e.message || '未知错误'),
          icon: 'none'
        });
      }
    },
    
    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl
      });
    },
    
    // 显示满意度调查
    showSatisfactionSurvey() {
      this.$refs.satisfactionPopup.open();
    },
    
    // 关闭满意度调查
    closeSatisfactionSurvey() {
      this.$refs.satisfactionPopup.close();
      this.rating = 0;
      this.feedback = '';
    },
    
    // 设置评分
    setRating(star) {
      this.rating = star;
    },
    
    // 提交满意度评价
    async submitSatisfaction() {
      if (this.rating === 0) {
        uni.showToast({
          title: '请选择评分',
          icon: 'none'
        });
        return;
      }
      
      try {
        const res = await uniCloud.callFunction({
          name: 'submitServiceRating',
          data: {
            rating: this.rating,
            feedback: this.feedback,
            sessionId: this.sessionId
          }
        });
        
        if (res.result.code === 200) {
          this.closeSatisfactionSurvey();
          uni.showToast({
            title: '评价提交成功',
            icon: 'success'
          });
          
          // 延迟加载感谢消息
          setTimeout(() => {
            this.loadNewMessages();
          }, 1000);
        } else {
          throw new Error(res.result.msg);
        }
      } catch (e) {
        console.error('提交评价失败:', e);
        uni.showToast({
          title: '提交失败',
          icon: 'none'
        });
      }
    },
    
    // 输入变化
    onInputChange() {
      this.canSend = this.inputMessage.trim().length > 0;
    },
    
    // 输入聚焦
    onInputFocus() {
      this.showToolbar = false;
      setTimeout(() => {
        this.scrollToBottom();
      }, 300);
    },
    
    // 输入失焦
    onInputBlur() {
      // 可以在这里处理一些失焦逻辑
    },
    
    // 开始语音输入
    startVoiceInput() {
      uni.showToast({
        title: '语音功能暂未开放',
        icon: 'none',
        duration: 2000
      });
    },
    
    // 切换工具栏
    toggleToolbar() {
      this.showToolbar = !this.showToolbar;
    },
    
    // 隐藏快捷服务
    hideQuickService() {
      this.showQuickService = false;
    },
    
    // 显示服务菜单
    showServiceMenu() {
      uni.showActionSheet({
        itemList: ['服务评价', '常见问题', '联系方式'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.showSatisfactionSurvey();
              break;
            case 1:
              this.sendQuickMessage('我想了解常见问题');
              break;
            case 2:
              this.showContactInfo();
              break;
          }
        }
      });
    },
    
    // 显示联系方式
    showContactInfo() {
      uni.showModal({
        title: '联系方式',
        content: '客服热线：400-123-4567\n工作时间：9:00-18:00\n邮箱：service@campus.com',
        showCancel: false
      });
    },
    
    // 返回
    goBack() {
      uni.navigateBack({
        fail: () => {
          uni.switchTab({
            url: '/pages/message/MessageCenter/MessageCenter'
          });
        }
      });
    },
    
    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        // 使用计算属性来确保滚动到底部
        this.scrollTop = this.scrollToBottomValue;
        // 再次确保滚动到底部
        setTimeout(() => {
          this.scrollTop = this.scrollToBottomValue;
        }, 50);
      });
    },
    
    // 滚动事件
    onScroll(e) {
      // 可以在这里处理滚动相关逻辑
    },
    
    // 重发消息
    async resendMessage(message) {
      if (message.status !== 'failed') return;
      
      message.status = 'sending';
      
      try {
        let res;
        if (message.type === 'image') {
          // 如果是图片消息，检查content是否是本地路径
          let imageUrl = message.content;
          
          // 如果是本地路径，需要重新上传
          if (message.content.startsWith('file://') || message.content.startsWith('blob:')) {
            console.log('重新上传图片...');
            
            // 获取文件扩展名
            const fileName = message.content.split('/').pop() || message.content.split('\\').pop();
            const fileExtension = fileName.split('.').pop() || 'jpg';
            
            const uploadResult = await uniCloud.uploadFile({
              filePath: message.content,
              cloudPath: `chat-images/${Date.now()}_${Math.random().toString(36).substr(2, 9)}.${fileExtension}`
            });
            
            if (!uploadResult.fileID) {
              throw new Error('图片重新上传失败');
            }
            
            // 获取文件的临时访问链接
            imageUrl = uploadResult.fileID;
            try {
              const getTempUrlRes = await uniCloud.getTempFileURL({
                fileList: [uploadResult.fileID]
              });
              
              if (getTempUrlRes.fileList && getTempUrlRes.fileList.length > 0) {
                imageUrl = getTempUrlRes.fileList[0].tempFileURL || uploadResult.fileID;
                console.log('重发图片获取临时访问链接成功:', imageUrl);
              }
            } catch (error) {
              console.log('重发图片获取临时访问链接失败，使用fileID:', error);
            }
            
            message.content = imageUrl; // 更新消息内容
          }
          
          res = await uniCloud.callFunction({
            name: 'sendCustomerServiceMessage',
            data: {
              content: '[图片]',
              messageType: 'image',
              imageUrl: imageUrl,
              sessionId: this.sessionId
            }
          });
        } else {
          res = await uniCloud.callFunction({
            name: 'sendCustomerServiceMessage',
            data: {
              content: message.content,
              messageType: 'text',
              sessionId: this.sessionId
            }
          });
        }
        
        if (res.result.code === 200) {
          // 更新消息状态和ID
          message.status = 'delivered';
          message.id = res.result.data._id;
          message.isTemp = false;
          
          // 保存会话ID
          if (res.result.data && res.result.data.sessionId) {
            this.sessionId = res.result.data.sessionId;
          }
          
          // 延迟加载客服回复
          setTimeout(() => {
            this.loadNewMessages();
          }, 1500);
        } else {
          throw new Error(res.result.msg);
        }
      } catch (e) {
        message.status = 'failed';
        uni.showToast({
          title: '重发失败',
          icon: 'none'
        });
      }
    },
    
    // 处理头像错误
    handleAvatarError(e) {
      e.target.src = '/static/images/default-avatar.png';
    },
    
    // 获取当前用户ID
    getCurrentUserId() {
      try {
        const userInfo = uni.getStorageSync('uni-id-pages-userInfo');
        return userInfo && userInfo._id ? userInfo._id : '';
      } catch (e) {
        return '';
      }
    },
    
    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp);
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    },
    
    // 格式化消息时间
    formatMessageTime(timestamp) {
      const date = new Date(timestamp);
      const now = new Date();
      const diff = now - date;
      
      if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      } else {
        return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
    },
    
    // 图片加载成功
    onImageLoad(e) {
      console.log('图片加载成功');
    },
    
    // 获取图片URL（与后台端保持一致）
    getImageUrl(message) {
      if (message.type === 'image') {
        // 优先使用 content 字段（如果它是有效的URL）
        if (message.content && 
            message.content !== '[图片]' && 
            message.content.trim() && 
            (message.content.startsWith('http://') || message.content.startsWith('https://') || message.content.startsWith('cloud://'))) {
          console.log('使用content作为图片URL:', message.content);
          return message.content;
        }
        
        // 然后使用 imageUrl 字段（但要排除无效的临时路径）
        if (message.imageUrl && 
            message.imageUrl.trim() && 
            !message.imageUrl.startsWith('http://tmp/') &&
            (message.imageUrl.startsWith('http://') || message.imageUrl.startsWith('https://') || message.imageUrl.startsWith('cloud://'))) {
          console.log('使用imageUrl作为图片URL:', message.imageUrl);
          return message.imageUrl;
        }
        
        // 如果都没有有效URL，记录错误
        console.error('图片消息没有有效的URL:', {
          messageId: message.id,
          content: message.content,
          imageUrl: message.imageUrl
        });
      }
      return null;
    },
    
    // 图片加载失败处理
    async onImageError(e) {
      console.log('图片加载失败，尝试获取临时链接');
      const imageElement = e.target || e.currentTarget;
      const originalSrc = imageElement.src;
      
      // 如果是云存储fileID格式，尝试获取临时访问链接
      if (originalSrc && originalSrc.startsWith('cloud://')) {
        try {
          const getTempUrlRes = await uniCloud.getTempFileURL({
            fileList: [originalSrc]
          });
          
          if (getTempUrlRes.fileList && getTempUrlRes.fileList.length > 0) {
            const tempUrl = getTempUrlRes.fileList[0].tempFileURL;
            if (tempUrl) {
              console.log('获取临时链接成功:', tempUrl);
              imageElement.src = tempUrl;
              return;
            }
          }
        } catch (error) {
          console.error('获取图片临时链接失败:', error);
        }
      }
      
      // 如果获取临时链接失败，显示默认占位图
      imageElement.src = '/static/images/image-error.png';
      console.log('图片加载失败，使用默认占位图');
    },
    
    // 重试图片加载
    async retryImageLoad(fileID, imgElement) {
      try {
        const getTempUrlRes = await uniCloud.getTempFileURL({
          fileList: [fileID]
        });
        
        if (getTempUrlRes.fileList && getTempUrlRes.fileList.length > 0) {
          const newUrl = getTempUrlRes.fileList[0].tempFileURL;
          if (newUrl && imgElement) {
            imgElement.src = newUrl;
            console.log('重新获取图片临时链接成功:', newUrl);
          }
        }
      } catch (error) {
        console.error('重新获取图片临时链接失败:', error);
      }
    },
    
    // 重试加载消息
    async retryLoadMessage(message) {
      uni.showLoading({
        title: '重新加载中...'
      });
      
      try {
        // 重新获取这条消息的详细信息
        const res = await uniCloud.callFunction({
          name: 'getCustomerServiceChat',
          data: {
            userId: this.currentUserId,
            sessionId: this.sessionId,
            limit: 50
          }
        });
        
        if (res.result && res.result.code === 200) {
          const newMessages = res.result.data;
          
          // 找到对应的消息并更新
          const targetMessage = newMessages.find(msg => msg._id === message.id);
          if (targetMessage && targetMessage.imageUrl && targetMessage.imageUrl.trim()) {
            const index = this.messages.findIndex(m => m.id === message.id);
            if (index !== -1) {
              // 更新消息的图片URL
              this.messages[index].content = targetMessage.imageUrl;
              this.messages[index].imageUrl = targetMessage.imageUrl;
              uni.showToast({
                title: '重新加载成功',
                icon: 'success'
              });
            }
          } else {
            uni.showToast({
              title: '图片仍然无法加载',
              icon: 'none'
            });
          }
        } else {
          throw new Error('获取消息失败');
        }
      } catch (error) {
        console.error('重试加载消息失败:', error);
        uni.showToast({
          title: '重新加载失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    }
  }
}
</script>

<style scoped>
.customer-service-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 客服头部 */
.service-header {
  height: 100rpx;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  position: relative;
  z-index: 100;
}

.header-left, .header-right {
  width: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-middle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.service-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-name {
  font-size: 32rpx;
  color: #fff;
  font-weight: 500;
}

.service-status {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 4rpx;
}

/* 快捷服务菜单 */
.quick-service-menu {
  background: #fff;
  border-bottom: 1rpx solid #e8e8e8;
  padding: 16rpx 0;
}

.quick-service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx 12rpx;
}

.quick-service-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.quick-service-list {
  white-space: nowrap;
  padding: 0 24rpx;
}

.quick-service-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-right: 32rpx;
  padding: 12rpx 16rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  min-width: 80rpx;
  transition: all 0.2s ease;
}

.quick-service-item:active {
  background: #e6f7ff;
  transform: scale(0.95);
}

.service-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
}

.service-text {
  font-size: 22rpx;
  color: #666;
}

/* 消息列表 */
.message-list {
  flex: 1;
  padding: 16rpx 0;
}

/* 欢迎区域 */
.welcome-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 40rpx;
  text-align: center;
}

.welcome-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e6f7ff, #bae7ff);
  border-radius: 50%;
  border: 4rpx solid #1890ff;
}

.service-emoji {
  font-size: 80rpx;
}

.welcome-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
}

.welcome-subtitle {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 48rpx;
}

.welcome-tips {
  width: 100%;
}

.tip-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 24rpx;
}

.tip-item {
  background: #fff;
  padding: 16rpx 24rpx;
  margin: 12rpx 0;
  border-radius: 16rpx;
  border: 1rpx solid #e8e8e8;
  transition: all 0.2s ease;
}

.tip-item:active {
  background: #e6f7ff;
  border-color: #1890ff;
}

.tip-text {
  font-size: 26rpx;
  color: #333;
}

/* 消息项 */
.message-item {
  margin: 16rpx 0;
  padding: 0 24rpx;
}


/* 客服消息头像特殊样式 */
.service-message-avatar {
  border: 2rpx solid #1890ff;
  background: linear-gradient(135deg, #e6f7ff, #bae7ff);
  position: relative;
}

.service-message-avatar::after {
  content: '🎧';
  position: absolute;
  bottom: -4rpx;
  right: -4rpx;
  width: 20rpx;
  height: 20rpx;
  background: #52c41a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rpx;
  border: 2rpx solid #fff;
}

.time-divider {
  text-align: center;
  margin: 24rpx 0;
}

.time-text {
  font-size: 22rpx;
  color: #999;
  background: rgba(255, 255, 255, 0.8);
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
}

.message-wrapper {
  display: flex;
  align-items: flex-start;
  margin: 12rpx 0;
}

.message-sent .message-wrapper {
  flex-direction: row;
  justify-content: flex-end;
}

.message-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin: 0 12rpx;
  flex-shrink: 0;
}

.user-avatar {
  margin-left: 12rpx;
  order: 2; /* 确保头像在右侧 */
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.user-content {
  align-items: flex-end;
  order: 1; /* 确保消息内容在左侧 */
}

.message-bubble {
  padding: 16rpx 20rpx;
  border-radius: 20rpx;
  position: relative;
  word-wrap: break-word;
}

.service-bubble {
  background: #fff;
  border: 1rpx solid #e8e8e8;
  margin-left: 12rpx;
}

.user-bubble {
  background: #1890ff;
  color: #fff;
}

.message-text {
  font-size: 28rpx;
  line-height: 1.4;
}

.user-bubble .message-text {
  color: #fff;
}

.image-container {
  position: relative;
  overflow: hidden;
  border-radius: 12rpx;
}

.message-image {
  max-width: 400rpx;
  max-height: 400rpx;
  border-radius: 12rpx;
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120rpx;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  color: #999;
}

.error-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
  color: #ccc;
}

.error-text {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.retry-text {
  font-size: 22rpx;
  color: #1890ff;
  cursor: pointer;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  background: rgba(24, 144, 255, 0.1);
}

.message-time {
  font-size: 20rpx;
  color: #999;
  margin: 8rpx 12rpx 0;
}

.message-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 6rpx;
  gap: 8rpx;
}

.user-content .message-time {
  text-align: right;
  margin: 0;
}

.message-status {
  margin: 0;
  display: flex;
  align-items: center;
}

/* 服务卡片 */
.service-card {
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
  border: 1rpx solid #e8e8e8;
}

.card-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
}

.card-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.card-buttons {
  display: flex;
  gap: 12rpx;
}

.card-button {
  flex: 1;
  padding: 12rpx 16rpx;
  background: #1890ff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 24rpx;
}

/* 正在输入 */
.typing-indicator {
  display: flex;
  align-items: flex-end;
  padding: 0 24rpx;
  margin: 12rpx 0;
}

.typing-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.typing-bubble {
  background: #fff;
  border: 1rpx solid #e8e8e8;
  border-radius: 20rpx;
  padding: 16rpx 20rpx;
}

.typing-dots {
  display: flex;
  gap: 6rpx;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #999;
  animation: typing 1.5s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-10rpx);
    opacity: 1;
  }
}

/* 输入区域 */
.input-section {
  background: #fff;
  border-top: 1rpx solid #e8e8e8;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.toolbar {
  display: flex;
  padding: 16rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  gap: 24rpx;
  background: #fafafa;
}

.toolbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  padding: 12rpx 20rpx;
  border-radius: 16rpx;
  transition: all 0.2s ease;
  background: #fff;
  border: 1rpx solid #e8e8e8;
  flex: 1;
  min-width: 0;
}

.toolbar-item:active {
  background: #e6f7ff;
  border-color: #1890ff;
  transform: translateY(-2rpx);
}

.toolbar-text {
  font-size: 22rpx;
  color: #666;
  font-weight: 500;
}

.input-area {
  display: flex;
  align-items: flex-end;
  padding: 12rpx 20rpx;
  gap: 12rpx;
}

.input-left, .input-right {
  flex-shrink: 0;
}

.input-middle {
  flex: 1;
}

/* Plus按钮样式 */
.plus-button {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1rpx solid #e8e8e8;
}

.plus-button:active {
  background: #e6f7ff;
  border-color: #1890ff;
}

/* 输入容器 */
.input-container {
  position: relative;
  background: #f8f9fa;
  border-radius: 24rpx;
  border: 1rpx solid #e8e8e8;
  transition: all 0.2s ease;
}

.input-container:focus-within {
  border-color: #1890ff;
  background: #fff;
}

.message-input {
  width: 100%;
  min-height: 72rpx;
  max-height: 200rpx;
  background: transparent;
  border: none;
  border-radius: 24rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  line-height: 1.4;
  resize: none;
}

/* 字符计数器 */
.input-counter {
  position: absolute;
  bottom: 8rpx;
  right: 16rpx;
  font-size: 20rpx;
  color: #999;
  background: rgba(255, 255, 255, 0.8);
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
}

/* 语音按钮 */
.voice-button {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: 1rpx solid #e8e8e8;
}

.voice-button:active {
  background: #e6f7ff;
  border-color: #1890ff;
  transform: scale(0.95);
}

/* 发送按钮 */
.send-button {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.send-button:active {
  transform: scale(0.95);
  background: #0050b3;
}

.send-button.active {
  background: #1890ff;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
}

/* 满意度调查 */
.satisfaction-survey {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
}

.survey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #f8f9fa;
  border-bottom: 1rpx solid #e8e8e8;
}

.survey-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.survey-content {
  padding: 32rpx;
}

.survey-question {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 24rpx;
  text-align: center;
}

.rating-stars {
  display: flex;
  justify-content: center;
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.feedback-input {
  width: 100%;
  height: 120rpx;
  background: #f8f9fa;
  border: 1rpx solid #e8e8e8;
  border-radius: 12rpx;
  padding: 16rpx;
  font-size: 26rpx;
  margin-bottom: 32rpx;
}

.survey-buttons {
  display: flex;
  gap: 16rpx;
}

.survey-btn {
  flex: 1;
  padding: 16rpx 0;
  border: none;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.cancel-btn {
  background: #f8f9fa;
  color: #666;
}

.submit-btn {
  background: #1890ff;
  color: #fff;
}
</style>
